<script setup type="ts">
import { getIcon } from '@/utils/icon'
import { computed } from 'vue'
import { useGraphStore } from '@/store/modules/graphStore'
import { NODE_CONFIG } from '@/config/node.config'

const { addNode, onChangeSelectNode, graph } = useGraphStore()
const nodeList = computed(() => {
  return graph.nodeList.map((node) => {
    return {
      id: node.id,
      title: NODE_CONFIG[node.shape].title,
      icon: NODE_CONFIG[node.shape].icon
    }
  })
})
const onSelectNode = ({ id }) => {
  onChangeSelectNode({
    id,
    isNeedSelect: true
  })
}
</script>

<template>
  <div class="graph-left-panel overflow-y-auto">
    <a-collapse :default-active-key="['1', '2']" :bordered="false">
      <a-collapse-item header="基础组件" key="1">
        <div class="grid grid-cols-3 gap-2 px-2 py-1">
          <div
            v-for="item in NODE_CONFIG"
            :key="item.key"
            :title="item.title"
            class="w-[70px] duration-300 rounded-lg bg-white text-[13px] cursor-pointer border p-2 text-center hover:text-arco-neutral-10 hover:bg-arco-fill-2 transition-all text-arco-neutral-8"
            @click="addNode(item.config)"
          >
            <component :is="getIcon(item.icon)" theme="outline" size="24"></component>
            <div> {{ item.title }}</div>
          </div>
        </div>
      </a-collapse-item>
      <a-collapse-item :header="`组件列表(${nodeList.length})`" key="2">
        <div class="px-2 overflow-y-auto graph-node-list">
          <div
            v-for="node in nodeList"
            :key="node.id"
            @click="onSelectNode(node)"
            class="mb-1 p-1 text-[13px] flex items-center text-arco-neutral-8 rounded hover:bg-arco-fill-2 hover:text-arco-neutral-10 transition-all cursor-pointer duration-300"
          >
            <a-button type="text" size="mini" class="mr-1">
              <template #icon>
                <component
                  size="14"
                  :is="getIcon(node.icon)"
                  theme="outline"
                ></component>
              </template>
            </a-button>

            <span>{{ node.title }}</span>
          </div>
        </div>
      </a-collapse-item>
    </a-collapse>
  </div>
</template>

<style lang="less">
.graph-left-panel {
  height: calc(100vh - 50px);
  .arco-collapse-item-content {
    padding: 0;
    background: #ffffff;
  }
}
</style>
